<template>
    <div :class="{'mmv-qrcode-vertical': vertical}" class="mmv-qrcode">
        <div class="mmv-qrcode__code">
            <img alt class="mmv-qrcode__img" src="https://img-static.mihoyo.com/new_qrcode/qrcode_ys.png" />
        </div>
        <div class="mmv-qrcode__text">
            <p class="mmv-qrcode__title">扫码下载米游社App</p>
            <p class="mmv-qrcode__subtitle">了解提瓦特最新资讯</p>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        vertical: {
            type: Boolean,
            default: false,
        },
    },
};
</script>

<style lang="less">
.mmv-qrcode {
    display: flex;
    align-items: center;
    &__title {
        font-size: 16px;
        color: #4cc3ff;
    }
    &__subtitle {
        font-size: 16px;
        margin-top: 8px;
        color: #999;
    }
    &__text {
        flex-direction: column;
        white-space: nowrap;
    }
    &__code {
        width: 100px;
        height: 100px;
        margin-right: 8px;
        position: relative;
        background-color: #f5f5f5;
        flex-shrink: 0;
    }
    &__img {
        height: 100%;
    }
    &.mmv-qrcode-vertical {
        display: block;
        width: 160px;
        .mmv-qrcode__code {
            margin: 0 auto;
        }
        .mmv-qrcode__text {
            text-align: center;
            margin-top: 20px;
        }
    }
}
</style>